<style scoped>
/* 原创招聘 */
html {
  font-size: 12px;
}

.panel {
  box-shadow: 4px 4px 4px #ddd;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #dfdfdf;
  background-color: #fff;
  border-radius: 8px;
}

.home_bg {
  padding: 20px 12px;
  /* background-color: #fafafa; */
}

.author-info-block {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
}

.avatar {
  flex: 0 0 auto;
  margin-right: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 19px;
  font-weight: bold;
  color: #afafaf;
}


.title .name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0.2rem;
  color: #4c4c4c;
  font-family: fantasy;
}

.title .desc {
  /* font-size: 0.6rem; */
  font-size: 10px;
  display: flex;
  flex-wrap: wrap;
}

.tag {
  background: #fafafa;
  color: #000000a6;
  padding: 0px 4px;
  border-radius: 4px;
  border: 1px dashed #c1c1c1;
  margin-right: 0.3rem;
  margin-bottom: 4px;
  font-size: 10px;
  display: inline-block;
}

.content-info-block {
  font-size: 0.75rem;
}

blockquote {
  padding: .5rem 0.6rem;
  border-top: 1px dashed #657b83;
  border-bottom: 1px dashed #657b83;
  border-right: 1px dashed #657b83;
  border-left: 2px solid #657b83;
  background-color: #ecefef;
  border-radius: 0.3rem;
  position: relative;
  line-height: 1.6;
}

blockquote i.icon-shangyinhao {
  position: absolute;
  top: 0;
  left: 6px;
  color: #c9c9c9;
}

blockquote i.icon-xiayinhao {
  position: absolute;
  bottom: 0;
  right: 6px;
  color: #c9c9c9;
}

blockquote pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

ul.comment-list {
  padding: 0px 10px 10px 20px;
  list-style: circle;
  color: #8d8d8d;
}

/* 头部区域 */
.header {
  padding: 60px 20px 20px 20px;
  background-color: #fafafa;
  border-bottom-left-radius: 240px;
  border-bottom-right-radius: 240px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
}

.header h2 {
  text-align: center;
  letter-spacing: 0.1rem;
  position: relative;
  font-size: 2.4rem;
  color: #657b83;
  font-weight: normal;
}

.header h2 span.tag {
  position: absolute;
  top: -1.6rem;
  left: 0;
  font-size: 0.8rem;
  border: 1px solid #ccc;
  padding: 2px 8px;
  letter-spacing: 0;
  font-family: initial;
  border-radius: 0;
  color: #fff;
  background-color: #657b83;
  font-weight: bold;
  border-radius: 6px;
}

.statement {
  font-size: 0.8rem;
  color: #999;
  margin: 10px 12px 10px 12px;
  border: 1.5px dashed #ccc;
  padding: 8px;
  font-family: cursive;
}

.contact {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 0.8rem;
  color: #657b83;
  font-family: cursive;
}

.contact strong{
  font-size: .9em;
}

.contact img {
  width: 80px;
  height: 80px;
}

.socail-logo {
  height: 25px;
  line-height: 25px;
}

/* 公职招聘 */
.government-job{
  background-size: 60%;
  padding: 14px 10px 4px 10px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 5px #ff786c;
}

.government-job .content{
  background-color: #fff;
  border: 1px dashed #ff786c;
  padding: 0px 10px 0;
}

.government-job .job-title{
  background-color: #ff786c;
  color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-top: 3px;
  margin-bottom: 20px;
  padding: 4px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  box-shadow: 0 0 0 2px #fafafa, 0 0 0 4px #ff786c;
}

.government-job .content-item{
  margin-bottom: 18px;
  padding: 0 8px;
}

.government-job .content-item .title{
  color: #757a7c;
  font-size: 13px;
  position: relative;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.government-job .content-item .context{
  font-size: 12px;
  color: #657b83;
}

.triangle-right{
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #757a7c;
  border-bottom: 5px solid transparent;
  margin-right: 6px;
}

.government-job .footer{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.government-job .footer .tag{
  padding: 2px 8px;
  border-color: #ff786c;
  color: #ff786c;
  border-style: solid;
  font-size: 12px;
}

/* 原创招聘 */
.original-panel{
  background-color: #dfe5ea;
  padding-bottom: 6px;
  border-radius: 6px;
  box-shadow: 3px 3px 5px #ccc;
  margin-left: 8px;
  margin-bottom: 20px;
}

.original-panel-item{
  border: 1px solid #ccc;
  border-radius: 4px;
  position: relative;
  width: 100%;
  right: 8px;
  background-color: #fff;
}

.o-header{
  top: -6px;
}

.o-content{
  padding: 4px 6px;
  box-sizing: border-box;
}

.o-header .title{
  border-bottom: 1px dashed #ccc;
  display: flex;
  padding: 6px 6px;
  align-items: center;
  background-color: #71909c;
  color: #fff;
}

.o-header .title .avatar{
  height: 30px;
  width: 30px;
  border-radius: 10px;
  border:1px solid #f1f1f1;
  background-image: url('https://image.gxrc.com/EnterpriseMaterial/Logo/80664_c2d573e2-b3be-4eaa-b965-9fbd76b9d91b.png');
  background-size: cover;
}

.o-header .title .name{
  font-size: 16px;
  letter-spacing: 2px;
}

.o-header .info{
  color: #657b83;
  padding: 8px 6px;
}

.info-item{
  padding: 2px 6px;
  display: flex;
  font-size: 12px;
  align-items: center;
}

.info-item i{
  font-size: 14px;
  margin-right: 6px;
}

.info-item p{
  line-height: 18px;
}

.job-item{
  margin-bottom: 8px;
  padding: 6px 8px;
}

.job-item-title{
  padding: 2px 10px;
  font-size: 12px;
  height: 16px;
  line-height: 16px;
  background-color: #71909c;
  color: #fff;
  display: inline-block;
  border: 1px solid #657b83;
  box-shadow: 0px 0px 4px 0px #657b83;
  margin-bottom: 6px;
}

.job-item-text{
  font-size: 12px;
  color:#657b83
}

.job-item-text ul{
  margin-left: 16px;
}

.original-panel .tag-container{
  display: flex;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #71909c;
}

.tag-container .tag{
  border-color: #71909c;
  color: #71909c;
  border-style: solid;
  box-shadow: 2px 2px 2px #71909c;
  margin-right: 8px;
}

span.circle{
  border: 1px solid #999;
  display: inline-block;
  border-radius: 50%;
  padding: 0 4px;
  font-size: 10px;
}

span.circle.active {
  color: #fff;
  background-color: #a9a9a9;
}
</style>

<style>
.paragraph-container p{
  margin: 0;
  line-height: 1.8em;
}
</style>


<template>
  <div class="panel">
    <div class="author-info-block">
      <div class="avatar">{{ firstWord }}</div>
      <div class="title">
        <div class="name">{{job.author}}</div>
      </div>
    </div>
    <div class="content-info-block">

      <blockquote>
        <i class="icon iconfont icon-xing" style="position: absolute;right: 10px;font-size: 26px;color: #bbb;top: 0;"></i>
        <p class="paragraph-container" v-html="job.paragraphList[0].context"></p>
      </blockquote>
    </div>
  </div>
</template>

<script>
export default {
  name: "PreviewGoverment",
  props: {
    job: Object,
  },
  computed: {
    firstWord() {
      let nameArr = this.job.author.split("");
      return nameArr[0];
    },
  },
};
</script>
